<template>
    <div class="input-tags">
        <div class="tags-default">
            <input :class="className" type="text" :value="inner" data-role="tagsinput"
                   placeholder="" class="form-control"/>
        </div>
    </div>
</template>

<script>
    import 'bootstrap-tagsinput/dist/bootstrap-tagsinput.css'
    import 'bootstrap-tagsinput/dist/bootstrap-tagsinput'

    export default {
        name: "InputTags",
        mounted() {
            this.init()
        },
        props: {
            className: {
                type: String,
                default: 'tags',
            },
            value: {
                type: String,
                default: '',
            },
            placeholder: {
                type: String,
                default: 'add tags',
            }
        },
        data() {
            return {
                inner: ''
            }
        },
        methods: {
            init() {
                let elt = $(`.${this.className}`)
                if (this.value) {
                    this.inner = this.value.split(';').join(',')
                } else {
                    this.inner =  this.value
                }
                this.$nextTick(() => {
                    elt.tagsinput('destroy')
                    elt.tagsinput()
                    let that = this
                    elt.on('itemAdded', function (event) {
                        // event.item: contains the item
                        that.$emit('input', $(this).tagsinput('items').join(';'))
                    });
                    elt.on('itemRemoved', function () {
                        that.$emit('input', $(this).tagsinput('items').join(';'))
                    })
                })
            }
        },
        watch: {
            value() {
                this.init()
            }
        }
    }
</script>

<style lang="stylus">
    .input-tags
        .bootstrap-tagsinput
            width : 100% !important;
</style>